<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in stats" :key="index">
        <el-card class="stat-card">
          <div class="stat-content">
            <i :class="item.icon"></i>
            <div>
              <p>{{ item.title }}</p>
              <h2>{{ item.value }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="在线听课人数" name="online">
        <div ref="chart" class="chart"></div>
      </el-tab-pane>
      <el-tab-pane label="课程购买量" name="purchase"></el-tab-pane>
      <el-tab-pane label="课程访问量" name="visit"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      activeTab: 'online',
      stats: [
        { title: '今日访问量', value: 0, icon: 'el-icon-s-data' },
        { title: '新增用户量', value: 0, icon: 'el-icon-user-solid' },
        { title: '今日购买量', value: 0, icon: 'el-icon-shopping-cart-full' },
        { title: '课程访问量', value: 0, icon: 'el-icon-s-marketing' }
      ],
      chartData: {
        dates: ['6-28', '6-29', '6-30', '7-1', '7-2'],
        values: [9160, 8000, 6000, 7000, 6000]
      }
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const chart = echarts.init(this.$refs.chart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartData.values,
            type: 'line',
            areaStyle: {}
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f5f5f5;
}
.stat-card {
  background-color: #ffffff;
  border-radius: 8px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-content {
  display: flex;
  align-items: center;
  color: #333;
}
.stat-content i {
  font-size: 40px;
  margin-right: 10px;
  color: #409eff;
}
.chart {
  width: 100%;
  height: 400px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
}
</style>
